<template>
  <div>
    <table border="1"> <!-- 添加border属性只是为了更容易看到表格边框，实际项目中可能不需要 -->
      <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(row, index) in tableData" :key="index">
        <td>{{ index + 1 }}</td> <!-- 假设第一列是行号 -->
        <td>{{ row.name }}</td> <!-- 假设每行数据有一个name属性 -->
        <td>{{ row.value }}</td> <!-- 假设每行数据有一个value属性 -->
      </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  data() {
    return {
      tableData: [
        { name: 'Row 1', value: 'Value 1' },
        { name: 'Row 2', value: 'Value 2' },
        { name: 'Row 3', value: 'Value 3' }
      ]
    };
  },
  watch: {

  },
  created() {

  },
  methods: {
  }
};
</script>
<style scoped>
.custom-table {
  width: 100%; /* 或者你想要的任何宽度 */
  border-collapse: collapse; /* 让表格的边框合并为一个单一的边框 */
}

.custom-table th, .custom-table td {
  border: 1px solid #ddd; /* 设置单元格边框 */
  padding: 8px; /* 设置单元格内边距 */
  text-align: left; /* 设置文本对齐方式，根据需要可以改为居中或右对齐 */
}

.custom-table th {
  background-color: #f2f2f2; /* 设置表头背景色 */
}
</style>
